
import React,{ Component }  from 'react';
import E from 'wangeditor';
// const E = window.wangEditor
// import E from 'wangeditor'
import "./style/wangEdit.less"
class VNode {
  [x: string]: any;
  // 构造函数
  constructor( tag:any,data:any,value:any,type:any ){
      // tag:用来表述 标签  data：用来描述属性  value：用来描述文本 type：用来描述类型
      this.tag = tag && tag.toLowerCase();//文本节点时 tagName是undefined
      this.data = data;
      this.value = value;
      this.type = type;
      this.children = [];

  }
  appendChild( vnode:any ){
      this.children.push( vnode );
  }
}
/**
    利用递归 来遍历DOM元素 生成虚拟DOM
    Vue中的源码使用 栈结构  ，使用栈存储 父元素来实现递归生成
    */
   function getVNode( node:any ){
    
    let nodeType = node.nodeType;
    let _vnode = null;
    if( nodeType === 1){
        // 元素
        let nodeName = node.nodeName;//元素名
        let attrs = node.attributes;//属性  伪数组
        let _attrObj:any = {};
        for(let i=0;i<attrs.length;i++){//attrs[ i ] 属性节点（nodeType == 2) 是对象
          console.log(_attrObj,'log-_attrObj')
          
            _attrObj[ attrs[ i ].nodeName ] = attrs[ i ].nodeValue;
        }
        _vnode = new VNode( nodeName,_attrObj,undefined,nodeType);
        // 考虑node的子元素
        let childNodes = node.childNodes;
        
        for(let i = 0;i<childNodes.length;i++){
            _vnode.appendChild( getVNode( childNodes[ i ] ) );//递归
        }
    }else if(  nodeType === 3 ){
        // 文本节点
        _vnode = new VNode( undefined,undefined,node.nodeValue,nodeType);
    }
    return _vnode;
}
class App extends React.Component<any,any> {
  constructor(props:any, context:any) {
    super(props, context)
    this.state = {
      editText:""
    }
     
    
  }
  // public state = {
  //   editText: "默认值"
  // }
  
  public editorBox:any
  componentDidMount() {
    let that = this
    // const elem = this.$refs.toolbar, this.$refs.editor; //获取editorElem盒子
    const editor = new E(this.refs.toolbar, this.refs.editor)  //new 一个 editorElem富文本
    that.editorBox = editor
    editor.customConfig.uploadFileName = 'upfile' //置上传接口的文本流字段
    // editor.customConfig.uploadImgHeaders = {} // 自定义 header
    editor.customConfig.uploadImgServer = 'https://dev.xiaomon.com/api/treeroot/v1/xxx/upload/uploadImage'//服务器接口地址
    editor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      // 'video', // 插入视频
      'code', // 插入代码
      'undo', // 撤销
      'redo', // 重复
      'fullscreen' // 全屏
    ]
    
    editor.customConfig.onchange = function(info:any){
      // console.log(info,'log-info-ccc',that.state)
      that.setState({...that.state,editText:info})
    }
    editor.create() //创建
    editor.txt.html(this.state.editText)  //设置富文本默认内容
    editor.customConfig.uploadImgHooks = {
      customInsert: function (insertImg:any, result:any, editor:any) {
        var url = result.url  //监听图片上传成功更新页面
        insertImg(url)
      }
    }
    // this.editorBox.customConfig.onchange = function(info:any){
    //   console.log(info,'log-info-ccc')
      
    // }
  }
  
  public submitEdit = () => {
    // this.editorBox.txt.append(6666666)  //设置富文本默认内容
    // console.log(getVNode(this.refs.editor),'log-info-ccc')
    this.props.saveEdit(getVNode(this.refs.editor))
    // console.log(this.editorBox.selection.getSelectionText(),'log-editor')
    // editor
  }
  render() {
    return (
      <>
        <div onClick={()=>{this.submitEdit()}}>提交</div>
        <div ref="editorElem" className="editBox">
          <div ref="toolbar" className="editToolbar"></div>
          <div id="insert" ref="editor" className="editContent"></div>
        </div>
      </>
    );
  }
}
export default App;